<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
</head>
<body>
<!--搜索框-->
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">筛选数据</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" id="activityReload" autocomplete="off" placeholder="请输入查询条件" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" id="startDate" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text"  id="endDate" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select  id="statusSearch" lay-search="">
                    <option value="">选择状态</option>
                    <option value="1">待审核</option>
                    <option value="2">通过</option>
                    <option value="3">驳回</option>
                    <option value="4">已结束</option>
                    <option value="5">进行中</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属社团</label>
            <div class="layui-input-inline" lay-filter="group">
                <select id="comSelect"  lay-search="">

                </select>
            </div>
        </div>
        <div class="layui-inline" id="searchContent">
            <button type="button" class="layui-btn" data-type="reload">查询</button>
            <button type="button" class="layui-btn" data-method="addActivity">申请活动</button>
        </div>
    </div>
</form>
<table id="activityList" lay-filter="activityList" ></table>
<!--添加社团成员页面-->
<div id="addActivityDiv" style="display: none;">
    <form class="layui-form layui-form-pane" id="activityAdd" lay-filter="activityAdd">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" autocomplete="off" placeholder="请输入活动标题" lay-verify="required"
                       lay-reqtext="请输入活动标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请简单描述一下该活动" name="description" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">预计花费</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="expense" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动地点</label>
            <div class="layui-input-inline">
                <input type="text" name="place" autocomplete="off" placeholder="请输入活动地点" lay-verify="required"
                       lay-reqtext="请输入活动地点" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">物资准备</label>
            <div class="layui-input-inline">
                <input type="text" name="supplies" autocomplete="off" placeholder="请输入活动所需物资" lay-verify="required"
                       lay-reqtext="请输入活动所需物资" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="startTime" lay-verify="date" id="adate1" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" lay-verify="date" id="adate2" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属社团</label>
            <div class="layui-input-inline">
                <input type="text" name="comName" id="acComName" readonly class="layui-input">
                <input type="hidden" name="comId" id="acComId">
            </div>
        </div>
    </form>
</div>
<!--修改社团成员页面-->
<div id="modifyActivityDiv" style="display: none;">
    <form class="layui-form layui-form-pane" id="activityModify" lay-filter="activityModify">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" autocomplete="off" placeholder="请输入活动标题" lay-verify="required"
                       lay-reqtext="请输入活动标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请简单描述一下该活动" name="description" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">预计花费</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="expense" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动地点</label>
            <div class="layui-input-inline">
                <input type="text" name="place" autocomplete="off" placeholder="请输入活动地点" lay-verify="required"
                       lay-reqtext="请输入活动地点" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">物资准备</label>
            <div class="layui-input-inline">
                <input type="text" name="supplies" autocomplete="off" placeholder="请输入活动所需物资" lay-verify="required"
                       lay-reqtext="请输入活动所需物资" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="startTime" lay-verify="date" id="adate3" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" lay-verify="date" id="adate4" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属社团</label>
            <div class="layui-input-inline">
                <input type="text" name="comName" autocomplete="off" readonly class="layui-input">
                <input type="hidden" name="comId" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发起人</label>
            <div class="layui-input-inline">
                <input type="text" name="pubName"  readonly
                        class="layui-input">
            </div>
        </div>
    </form>
</div>
<div id="showActivityReject" style="display: none">
    <div class="layui-input-inline" style="width: 100%;height: 100%;">
        <textarea readonly id="aReason" name="rejectReason" class="layui-textarea"></textarea>
    </div>
</div>
<!--当前状态1审批，2通过，3驳回，4结束-->
</body>
<script type="text/html" id="comBar">
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="delete">撤销活动</a>
    {{#  } }}
    {{#  if(d.status == 3){ }}
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="seeReason" >驳回理由</a>
    <a class="layui-btn layui-btn-xs" lay-event="checkOnce">提交审核</a>
    {{#  } }}
    {{#  if(d.status == 6){ }}
    {{#  } }}
</script>


<script src="../lib/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table','form','layer','jquery','laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        //加载社团下拉列表
        $.ajax({
            type:'get',
            url:'/communityList',
            dataType:'json',
            success:function (res) {
                if (res.state == true){
                    var dataList = res.data;
                    $("#comSelect").html("");
                    var option = "<option value=''>请选择社团</option>";
                    for (var i = 0; i < dataList.length; i++) {
                        option += "<option value='"+dataList[i].id+"'>"+dataList[i].name+"</option>";
                    }
                    $("#comSelect").html(option);
                    form.render();
                } else {
                    layer.msg(res.msg,{icon:3})
                }
            }
        });

        //获取社团数据
        table.render({
            elem: '#activityList'
            ,height: 440
            ,url: '/activity' //数据接口
            ,request:{
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {
                countName: 'total'
            }
            ,page: true //开启分页
            ,totalRow:true
            ,cellMinWidth: 70
            ,even:true
            ,skin:'line'
            ,limit: 10
            ,cols: [[ //表头
                {field: 'id', hide:'true'}
                ,{field: 'supplies', hide:'true'}
                ,{field: 'title', title: '活动标题',align:'center'}
                ,{field: 'description', title: '活动描述', align:'center'}
                ,{field: 'expense', title: '活动花费' ,align:'center',sort:true}
                ,{field: 'place', title: '活动地点', align:'center'}
                ,{field: 'startTime', title: '活动开始时间', align:'center'}
                ,{field: 'endTime', title: '活动结束时间',align:'center'}
                ,{field: 'comName', title: '所属社团', align:'center'}
                ,{field: 'pubName', title: '活动发起人', align:'center'}
                ,{field: 'status', title: '状态', sort: true,align:'center',templet:'#status'}
                ,{title:'操作',toolbar:'#comBar',width:230}
            ]],
            id:'activityTable'
        });
        //监听工具条
        table.on('tool(activityList)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'delete'){ //删除
                layer.confirm('是否撤销活动'+data.title+"？",{icon: 3, title:'温馨提示：此操作不可逆！'}, function(index){
                    obj.del();
                    //发送服务端
                    $.ajax({
                        url:'/activity/'+data.id,
                        type:'delete',
                        dataType:'json',
                        success:function (res) {
                            if (res.state == true) {//禁用成功
                                layer.msg('撤销成功', {icon:1,time:1000},function(){
                                    setTimeout('window.location.reload()',200);
                                });
                            }else {//禁用失败
                                layer.msg(res.msg, {icon:3,time:1000},function(){
                                    setTimeout('window.location.reload()',1000);
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'update'){ //编辑
                //数据回显
                var data = obj.data;
                //回显数据
                form.val("activityModify",{
                    "id":data.id,
                    "title":data.title,
                    "description":data.description,
                    "expense":data.expense,
                    "place":data.place,
                    "supplies":data.supplies,
                    "startTime":data.startTime,
                    "endTime":data.endTime,
                    "pubName":data.pubName,
                    "comName":data.comName,
                });
                layer.open({
                    type: 1,
                    title:["修改活动信息", 'font-size:14px; font-weight: 700;'],
                    btn:['确认修改','取消修改'],
                    btnAlign: 'c',
                    content: $('#modifyActivityDiv'),
                    area: ['700px','500px'],
                    closeBtn:2,
                    yes: function(index, layero){
                        var comData = $("#activityModify").serialize();
                        $.ajax({
                            type:'post',
                            url:'/activity',
                            data:comData,
                            dataType:'json',
                            success:function (res) {
                                if (res.state == true){
                                    layer.msg('修改成功', {icon:1,time:1000},function(){
                                        //关闭弹框
                                        layer.load(2);
                                        layer.close(index);
                                        setTimeout('window.location.reload()',500);
                                    });
                                }else {
                                    layer.msg(res.msg, {icon:3,time:1000});
                                }
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //取消修改，关闭弹框
                        layer.close(index);
                    }
                });
            } else if(layEvent === 'checkOnce'){ //发起再次审核
                layer.confirm('确认已经核对好相关信息？',{icon: 3, title:'提示：此操作不可逆'}, function(index){
                    obj.del();
                    //发送服务端
                    data.status = '1';//待审核状态
                    data.rejectReason = "";
                    $.ajax({
                        url:'/activity',
                        type:'post',
                        data:"id="+data.id+"&status="+data.status+"&rejectReason="+data.rejectReason,
                        dataType:'json',
                        success:function (res) {
                            if (res.state == true) {//
                                layer.msg('申请成功，请您耐心等待', {icon:1,time:1000},function(){
                                    setTimeout('window.location.reload()',200);
                                });
                            }else {//禁用失败
                                layer.msg(res.msg, {icon:3,time:1000},function(){
                                    setTimeout('window.location.reload()',1000);
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'seeReason'){ //查看驳回理由
                $('#aReason').val(data.rejectReason);
                layer.open({
                    type: 1,
                    title:["驳回理由", 'font-size:14px; font-weight: 700;'],
                    btnAlign: 'c',
                    content: $('#showActivityReject'),
                    area: ['400px','150px'],
                    closeBtn:2
                });
            }
        });
        //添加活动
        var active = {
            addActivity: function () {//添加活动
                //固定社团的值
                $("#acComId").val(localStorage.getItem('comId'));
                $("#acComName").val(localStorage.getItem('comName'));
                layer.open({
                    type: 1,
                    title:["申请活动", 'font-size:14px; font-weight: 700;'],
                    btn:['确认申请','取消申请'],
                    btnAlign: 'c',
                    content: $('#addActivityDiv'),
                    area: ['700px','500px'],
                    closeBtn:2,
                    yes: function(index, layero){
                        var comData = $("#activityAdd").serialize();
                        $.ajax({
                            type:'post',
                            url:'/activity',
                            data:comData,
                            dataType:'json',
                            success:function (res) {
                                if (res.state == true){
                                    layer.msg('申请成功', {icon:1,time:1000},function(){
                                        //关闭弹框
                                        layer.load(2);
                                        layer.close(index);
                                        setTimeout('window.location.reload()',500);
                                    });
                                }else {
                                    layer.msg(res.msg, {icon:3,time:1000});
                                }
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //取消修改，关闭弹框
                        layer.close(index);
                    }
                });
            },
            reload: function(){
                var activityReload = $('#activityReload'); //获取输入框的id
                var statusSearch = $("#statusSearch");
                var startDate = $("#startDate");
                var endDate = $("#endDate");
                var comSelect = $("#comSelect");
                //执行重载
                table.reload('activityTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        searchKey: activityReload.val(),
                        status:statusSearch.val(),
                        startTime:startDate.val(),
                        endTime:endDate.val(),
                        comId:comSelect.val()
                    }
                }, 'data');
            }
        }

        $('#searchContent .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        $('#searchContent .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //日期
        laydate.render({
            elem: '#adate1',
            type:'datetime'
        });
        laydate.render({
            elem: '#adate2',
            type:'datetime'
        });
        laydate.render({
            elem: '#adate3',
            type:'datetime'
        });
        laydate.render({
            elem: '#adate4',
            type:'datetime'
        });

        laydate.render({
            elem:'#startDate',
            type:'datetime'
        });
        laydate.render({
            elem:'#endDate',
            type:'datetime'
        });
    });
</script>
<script type="text/html" id="status">
    {{#  if(d.status == 1){ }}
    待审核
    {{#  } else if(d.status == 2 ) { }}
    通过
    {{#  }else if(d.status == 3 ) { }}
    驳回
    {{#  }else if(d.status == 4 ) { }}
    已结束
    {{#  }else if(d.status == 5 ) { }}
    进行中
    {{#  }else if(d.status == 6 ) { }}
    超时未审批
    {{#  }
    }}
</script>
</html>